import Taro, { Component } from "@tarojs/taro";
import * as echarts from "./ec-canvas/echarts";

function setChartData(chart, data) {
  let option = {
    // title: {
    //   text: '四路交流电量'
    // },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['市总电', '环控用电', '通信设备用电', '油机发电']
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      width: "90%",
      containLabel: true
    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['00:01:00', '00:02:00', '00:03:00', '00:04:00', '00:05:00', '00:06:00', '00:07:00']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '市总电',
        type: 'line',
        symbol: 'none',
        data: []
      },
      {
        name: '环控用电',
        type: 'line',
        symbol: 'none',
        data: []
      },
      {
        name: '通信设备用电',
        type: 'line',
        symbol: 'none',
        data: []
      },
      {
        name: '油机发电',
        type: 'line',
        symbol: 'none',
        data: []
      }
    ],
    type:'line',
  };
  chart.setOption(data?data:option);
}

export default class LineChart extends Component {
  config = {
    usingComponents: {
      "ec-canvas": "./ec-canvas/ec-canvas"
    }
  };

  constructor(props) {
    super(props);
  }

  state = {
    ec: {
      lazyLoad: true
    }
  };

  refresh(data) {
    console.log("外部调用了图表")
    this.Chart.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setChartData(chart, data);
      return chart;
    });
  }

  refChart = node => (this.Chart = node);

  render() {
    return (
      <ec-canvas
        ref={this.refChart}
        canvas-id="mychart-area"
        ec={this.state.ec}
      />
    );
  }
}
